<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #taskBook {
            margin: 200px auto;
            width: 475px;
            box-shadow: 0px 0px 5px 1px #c7c7c7;
        }

        #taskBook #enterTask {
            color: #000;
            font-size: 22px;
            text-indent: 10px;
            width: 475px;
            height: 58px;
            border: none;
            border-bottom: 1px solid #d8d8d8;
            outline: none;
        }

        #taskBook #enterTask::placeholder {
            color: #868686;
        }

        #taskBook #myTask {
            color: #868686;
            text-indent: 8px;
            font-size: 22px;
            line-height: 58px;
            width: 475px;
            height: 58px;
            border: none;
            border-bottom: 1px solid #d8d8d8;
        }

        #taskBook #myTask .number {
            font-size: 16px;
        }

        #taskBook #myTask .delete {
            float: left;
            position: relative;
            left: 90%;
            font-size: 16px;
            cursor: pointer;
        } 

        #taskBook #taskStatus {
            position: relative;
            height: 40px;
            width: 475px;
            line-height: 40px;
            color: #868686;
            font-size: 14px; 
        }

        #taskBook #taskStatus .count {
            position: relative;
            display: block;
            float: left;
            left: 3%;
        }

        #taskBook #taskStatus .clear {
            position: relative;
            display: block;
            float: left;
            left: 74%;
            cursor: pointer;
        }

    </style>
    <script src="vue.js"></script>
</head>

<body>
    
    <form id="taskBook">

        <input v-model="inputVal" @keyup.enter="addTask" type="text" autocomplete="off" id="enterTask" name="enterTask" placeholder="enter your task" onkeypress="if(event.keyCode==13) return false">
        <div id="myTask" v-for="(msg, index) in taskmsg">
            <span class="number">{{ index+1 }}.</span>
            <span>&nbsp;&nbsp;&nbsp;</span>
            <span>{{ msg }}</span>
            <span class="delete" @click="remove(index)">x</span>
        </div>
        <div id="taskStatus" v-if="taskmsg.length != 0">
            <span class="count">{{ taskmsg.length }} items left</span>
            <span class="clear" @click="clear">Clear</span>
        </div>

    </form>

    <script>

        var vm = new Vue({
            el: "#taskBook",
            data: {
                taskmsg: [],
                inputVal: ""
            },
            methods: {
                addTask: function(e) {
                    this.taskmsg.push(this.inputVal);
                    this.inputVal = "";
                },
                clear: function(e) {
                    this.taskmsg = [];
                },
                remove: function(index) {
                    let newtaskMsg = [];
                    for(let i=0;i<this.taskmsg.length;i++) {
                        if(i!=index) newtaskMsg.push(this.taskmsg[i]);
                    }
                    this.taskmsg = newtaskMsg;
                }
            }
        })

    </script>

</body>
</html>